﻿<div [@routerTransition]>
    <div id="HostDashboard">
        <div class="m-subheader">
            <div class="row align-items-center">
                <div class="mr-auto col-auto">
                    <h3 class="m-subheader__title m-subheader__title--separator">
                        <span>导管制造</span>
                    </h3>
                    <span class="m-section__sub">
                        情况汇总
                    </span>
                </div>


            </div>
        </div>

        <div class="m-content">
            <div class="m-portlet">
                <div class="m-portlet__body  m-portlet__body--no-padding">
                    <div class="row m-row--no-padding m-row--col-separator-xl">
                        <div class="col-xl-4">
                            <!--begin:: Widgets/Stats2-1 -->
                            <div class="m-widget1">
                                <div class="m-widget1__item">
                                    <div class="row m-row--no-padding align-items-center">
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                在线任务
                                            </h3>
                                            <span class="m-widget1__desc">
                                                当前正在进行的任务
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span class="m-widget1__number m--font-brand">
                                                {{numberOfSummary.inlineNum}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-widget1__item">
                                    <div class="row m-row--no-padding align-items-center">
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                问题任务
                                            </h3>
                                            <span class="m-widget1__desc">
                                                暂停的任务
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span class="m-widget1__number m--font-warning">
                                                {{numberOfSummary.inlineNumForRequest}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-widget1__item">
                                    <div class="row m-row--no-padding align-items-center">
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                近期报废
                                            </h3>
                                            <span class="m-widget1__desc">
                                                近一个月
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span class="m-widget1__number m--font-danger">
                                                {{numberOfSummary.inlineNumForScrap}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-widget1__item">
                                    <div class="row m-row--no-padding align-items-center">
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                近期交付
                                            </h3>
                                            <span class="m-widget1__desc">
                                                近一个月
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span class="m-widget1__number m--font-success">
                                                {{numberOfSummary.inlineNumForComplete}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end:: Widgets/Stats2-1 -->
                        </div>


                        <div class="col-xl-4">
                            <!--begin:: Widgets/Profit Share-->
                            <div class="m-widget14">
                                <div class="m-widget14__header">
                                    <h4 class="m-widget14__desc-text">
                                        任务分布
                                    </h4>
                                    <span class="m-widget14__desc">
                                        型号分布情况
                                    </span>
                                </div>
                                <div class="row  align-items-center">
                                    <div class="col">
                                        <div id="m_chart_profit_share" class="m-widget14__chart" style="height: 160px">
                                            <p-chart type="doughnut" [data]="data" [options]="dataOption"></p-chart>
                                        </div>
                                    </div>
                                   <!-- <div class="col">
                                        <div class="m-widget14__legends">
                                            <div *ngFor="let model of numberOfModel" class="m-widget14__legend"
                                                (click)="openProcess(model.key,'','')">
                                                <span class="m-widget14__legend-bullet m--bg-accent"></span>
                                                <span class="m-widget14__legend-text">
                                                    {{model.key}} — {{model.value}}
                                                </span>
                                            </div>

                                        </div>
                                        
                                    </div>-->
                                </div>
                            </div>
                            <!--end:: Widgets/Profit Share-->
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4">
                    <!--begin:: Packages-->
                    <div class="m-portlet m--bg-warning m-portlet--bordered-semi m-portlet--full-height ">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <i class="flaticon-map-location  m--font-light
                                    "></i>
                                    <h3 class="m-portlet__head-text m--font-light">
                                        工位情况
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push"
                                        m-dropdown-toggle="hover" aria-expanded="true">
                                        <a href="#"
                                            class="m-portlet__nav-link m-dropdown__toggle dropdown-toggle btn btn--sm m-btn--pill m-btn btn-outline-light m-btn--hover-light">
                                            详细
                                        </a>
                                        <div class="m-dropdown__wrapper" style="z-index: 101;">
                                            <span
                                                class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"
                                                style="left: auto; right: 43.5px;"></span>
                                            <div class="m-dropdown__inner">
                                                <div class="m-dropdown__body">
                                                    <div class="m-dropdown__content">
                                                        <ul class="m-nav">
                                                            <li class="m-nav__item">
                                                                <a href="" class="m-nav__link"
                                                                    routerLink="/app/duct/process">
                                                                    <i class="m-nav__link-icon flaticon-share"></i>
                                                                    <span class="m-nav__link-text">
                                                                        所有加工情况
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <!--begin::Widget 29-->
                            <div class="m-widget29">
                                <div *ngFor="let process of numberOfProcess" class="m-widget_content"
                                    (click)="openProcess('',process.processName,'')">
                                    <h3 class="m-widget_content-title">
                                        {{process.processName}}
                                    </h3>
                                    <div class="m-widget_content-items">
                                        <div class="m-widget_content-item">
                                            <span>
                                                全部件数
                                            </span>
                                            <span class="m--font-accent">
                                                {{process.numberForAll}}
                                            </span>
                                        </div>
                                        <div class="m-widget_content-item">
                                            <span>
                                                暂停
                                            </span>
                                            <span class="m--font-brand">
                                                {{process.numberForPause}}
                                            </span>
                                        </div>
                                        <div class="m-widget_content-item">
                                            <span>
                                                超期
                                            </span>
                                            <span>
                                                {{process.numberForExceedTime}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Widget 29-->
                        </div>
                    </div>
                    <!--end:: Packages-->
                </div>
                <div class="col-xl-6 col-lg-12">
                    <!--Begin::Portlet-->
                    <div class="m-portlet m-portlet--full-height ">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                        <i class="la flaticon-alert-2
                                        m--font-info"></i>
                                    <h3 class="m-portlet__head-text">
                                        近期问题
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push"
                                        m-dropdown-toggle="hover" aria-expanded="true">
                                        <a href="#"
                                            class="m-portlet__nav-link m-portlet__nav-link--icon m-portlet__nav-link--icon-xl m-dropdown__toggle">
                                            <i class="la la-ellipsis-h m--font-brand"></i>
                                        </a>
                                        <div class="m-dropdown__wrapper" style="z-index: 101;">
                                            <span
                                                class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"
                                                style="left: auto; right: 21.5px;"></span>
                                            <div class="m-dropdown__inner">
                                                <div class="m-dropdown__body">
                                                    <div class="m-dropdown__content">
                                                        <ul class="m-nav">
                                                            <li class="m-nav__item">
                                                                <a href="" class="m-nav__link"
                                                                    routerLink="/app/duct/request">
                                                                    <i class="m-nav__link-icon flaticon-share"></i>
                                                                    <span class="m-nav__link-text">
                                                                        问题管理
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="m-nav__item">
                                                                <a href="" class="m-nav__link">
                                                                    <i class="m-nav__link-icon flaticon-share"></i>
                                                                    <span class="m-nav__link-text">
                                                                        刷新
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="m-widget3">
                                <div *ngFor="let requestion of requestions" class="m-widget3__item">
                                    <div class="m-widget3__header">
                                        <div class="m-widget3__user-img" style="width:40px">
                                                <span class="m-widget3__time">
                                                        {{requestion.creationTime | date:'MM-dd HH:mm'}}
                                                     </span>
                                                
                                        </div>
                                        <div class="m-widget3__info">
                                            <span class="m-widget3__username">
                                                {{requestion.drawingCode}}
                                            </span>
                                            <br>
                                            <span class="m-widget3__time">
                                               {{requestion.requesterId}}
                                            </span>
                                            <br>
                                            <span class="m-widget3__time">
                                                    {{requestion.requestInfo}}
                                            </span>
                                        </div>
                                        <span class="m-widget3__status m--font-success" *ngIf="requestion.responder">
                                            {{requestion.responder}}
                                        </span>
                                        <span class="m-widget3__status m--font-warning" *ngIf="!requestion.responder">
                                                <i class="fa fa-unlink m--font-warning"></i>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End::Portlet-->
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="m-portlet m-portlet--full-height income-statistics">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i class="la flaticon-paper-plane
                                        m--font-info"></i>
                                        <span class="caption-subject font-blue bold uppercase">产品进展({{lineInstanceForExecuteOrderByDurationCount}})</span>
                                        <small class="d-none d-sm-inline-block">
                                            <span class="caption-helper">

                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">

                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <table class="table table-bordered table-hover " id="m_table_1" role="grid">
                                <thead>
                                    <th>
                                        图号
                                    </th>
                                    <th>
                                        规格
                                    </th>
                                    <th>
                                        当前工序
                                    </th>
                                    <th>
                                        停留时间
                                    </th>
                                </thead>
                                <tbody>
                                    <tr role="row" class="odd"
                                        *ngFor="let instance of lineInstanceForExecuteOrderByDuration">
                                        <td class="sorting_1">
                                            {{instance.productionDrawingCode}}
                                        </td>
                                        <td>
                                            {{instance.productionSpecial}}
                                        </td>
                                        <td>
                                            {{instance.currentStationName}}
                                        </td>
                                        <td>
                                            {{(( currentTime - instance.lastExecutionTime) / (60 * 60 *1000)).toFixed(1)}}小时
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row ">
                            <div class="col-sm-12 col-md-5 ">
                                <div class="primeng-datatable-container expiring-tenants-table"
                                    (click)="getDecadeLineInstanceOrderByDuration()" ng-reflect-busy-if="false">
                                    <div class="primeng-no-data ng-tns-c19-1 ng-star-inserted" style="">
                                        ↓显示更多(还有{{lineInstanceForExecuteOrderByDurationCount}}条 ) </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="m-portlet m-portlet--full-height income-statistics">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i class="la flaticon-information
                                        m--font-info"></i>
                                        <span class="caption-subject font-blue bold uppercase">型号问题</span>
                                        <small class="d-none d-sm-inline-block">
                                            <span class="caption-helper">

                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">

                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <table class="table table-bordered table-hover dataTable no-footer" id="m_table_1"
                                role="grid">
                                <thead class="m--font-bolder">
                                    <th>
                                        型号
                                    </th>
                                    <th>
                                        返工数量/占比
                                    </th>
                                    <th>
                                        报废数量/占比
                                    </th>
                                </thead>
                                <tbody>
                                    <tr role="row" class="odd" *ngFor="let ras of returnAndScrapGroupByModelOutput">
                                        <td class="sorting_1">
                                            {{ras.modelName}}
                                        </td>
                                        <td>
                                            {{ras.returnCount}}/{{(ras.returnRatio*100).toFixed(1)}}%
                                        </td>
                                        <td>
                                            {{ras.scrapCount}}/{{(ras.scrapRatio*100).toFixed(1)}}%
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <div class="col-md-6 col-sm-12">
                    <div class="m-portlet m-portlet--full-height sales-summary-chart">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                        <i class="la flaticon-user-settings
                                        m--font-info"></i>
                                    <h3 class="m-portlet__head-text"> 生产小组 </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <div class="btn-group btn-group-devided" data-toggle="buttons">
                                    <label *ngFor="let workTeam of workTeamList" id="workTeam" (click)="getFilterWorkTeamInfo(workTeam.id)"
                                        class="btn m-btn--pill btn-secondary"> {{workTeam.displayName}} 
                                    </label>                                   
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body" style="min-height: 200px;">
                            <table class="table table-bordered table-hover dataTable no-footer" id="m_table_1" role="grid">
                                <thead class="m--font-bolder">
                                    <th>
                                        月份
                                    </th>
                                    <th>
                                        出库
                                    </th>
                                    <th>
                                        内窥
                                    </th>
                                    <th>
                                        弯管
                                    </th>
                                    <th>
                                        焊接
                                    </th>
                                </thead>
                                <tbody>
                                    <tr role="row" class="odd" *ngFor="let w of filterWorkTeamInfo">
                                        <td class="sorting_1">
                                            {{w.monthString}}
                                        </td>
                                        <td>
                                            {{w.outStoreConut}}
                                        </td>
                                        <td>
                                            {{w.endoscopyConut}}
                                        </td>
                                        <td>
                                            {{w.bendDuctConut}}
                                        </td>
                                        <td>
                                            {{w.weldConut}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

            
            </div>
        </div>
    </div>
</div>